<template>
  <div class="app-container">
    <lb-layout
      v-loading="$store.getters.loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="#a19f9fb0;"
    >
      <div>
        <el-row class="tab-area">
          <el-col :span="24">
            <el-tabs
              v-model="activeName"
              @tab-click="handleChangetab"
              class="text-tabs TTB-gutter"
            >
              <el-tab-pane
                v-for="(item, index) in tabArr"
                :key="index"
                :label="item.label"
                :name="item.value"
                v-hasPermi="item.hasPermi"
              ></el-tab-pane>
              <!-- v-if="item.show" -->
            </el-tabs>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <component :is="activeName" :ref="activeName"></component>
          </el-col>
        </el-row>
      </div>
    </lb-layout>
  </div>
</template>

<script>
import extremum from "@/views/statistics/energy/components/behaviorC/extremum.vue";
import circuit from "@/views/statistics/energy/components/behaviorC/circuit.vue";
import energy from "@/views/statistics/energy/components/behaviorC/energy.vue";
import kwh from "@/views/statistics/energy/components/behaviorC/kwh.vue";
import environment from "@/views/statistics/energy/components/behaviorC/environment.vue";
export default {
  components: {
    extremum,
    circuit,
    energy,
    kwh,
    environment,
  },
  data() {
    return {
      activeName: "extremum",
      tabArr: [
        {
          label: "极值分析",
          value: "extremum",
          hasPermi: [""],
          show: false,
        },
        {
          label: "线路损耗",
          value: "circuit",
          hasPermi: [""],
          show: false,
        },
        {
          label: "能耗异常",
          value: "energy",
          hasPermi: [""],
          show: false,
        },
        {
          label: "分时段分析",
          value: "kwh",
          hasPermi: [""],
          show: false,
        },
        {
          label: "环境监测",
          value: "environment",
          hasPermi: [""],
          show: false,
        },
      ],
    };
  },
  created() {},
  methods: {
    handleChangetab() {},
  },
};
</script>

<style lang="scss" scoped>
.text-tabs {
  margin: -10px 0 10px -40px;
}
</style>
